<script setup lang="ts">
import myHeader from "@/components/header.vue";
</script>

<template>
    <div class="wrapper">
        <div class="left">
            <ul>
                <li v-for="key in 3" :key="key">
                    <router-link :to="`/article${key}`">文章{{ key }}</router-link>
                </li>
            </ul>
        </div>
        <div class="right">
            <my-header></my-header>
            <div class="content">
                <slot />
            </div>
            <slot name="footer">
                <div class="footer">
                    <p>xxxxxx公司</p>
                    <p>xxxxxx备案号</p>
                    <p>xxxxxx电话</p>
                    <p>xxxxxx地址</p>
                </div>
            </slot>
        </div>
    </div>
</template>

<style scoped>
.wrapper {
    display: flex;
    height: 100vh;
}
.wrapper > .left {
    box-sizing: border-box;
    width: 200px;
    height: 100%;
    border-right: 1px solid rgb(229, 230, 235);
}
.wrapper > .left::-webkit-scrollbar {
    width: 0px; /* 调整为需要的宽度 */
    display: none; /* 隐藏滚动条 */
}

.wrapper > .left > ul > li {
    list-style: none;
    color: black;
    padding: 10px;
}
.wrapper > .left > ul > li > a:visited {
    color: black;
}
.wrapper > .right {
    flex: 1;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.wrapper > .right > .content {
    flex: 1;
    padding: 0 15px;
}
.wrapper > .right > .footer {
    border-top: 1px solid rgb(229, 230, 235);
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper > .right > .footer > p {
    padding: 5px;
    color: silver;
}
</style>
